<template>
    <div class="timePicker">
        <div class="calendar__block">
            <div class="header">
                <div class="title">选择参观日期</div>
                <div class="date">{{checkTime}}</div>
            </div>
            <ul class="weekdays">
                <li>
                <p>一</p>
                <small>MON</small>
                </li>
                <li>
                <p>二</p>
                <small>TUE</small>
                </li>
                <li>
                <p>三</p>
                <small>WED</small>
                </li>
                <li>
                <p>四</p>
                <small>THU</small>
                </li>
                <li>
                <p>五</p>
                <small>FRI</small>
                </li>
                <li>
                <p>六</p>
                <small>SAT</small>
                </li>
                <li>
                <p>日</p>
                <small>SUN</small>
                </li>
            </ul>
            <ul class="days">
                <li :class="{'closed':day.close, 'none': !day.has, 'check': theDay==day.td_id, 'today': day.day == today, 'add': day.add}"
                    v-for="(day, index) in days"
                    :key="index"
                    @click="checkDay(day)"
                    >
                    <div v-if="day.close">闭馆</div>
                    <span v-if="day.day == today" class="tod">今</span>
                    <div class="day" v-if="!day.close">{{day.day.substr(8, 10)}}</div>
                    <div class="small" v-if="!day.close&&day.tp">{{day.has?'有票':'无票'}}</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { getDate } from '../assets/js/assist'
import { Session } from '../assets/js/utils'
    const ONEDAY = 60*60*24*1000
    export default {
        name: '',
        props: {
            calendarInfo: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        data() {
            return {
                days: [
                    
                ],
                today: '',
                theDay: '',
                checkTime: ''
            }
        },
        watch: {
            theDay(val) {
                let ischeck = false
                if(val) {
                    ischeck = true
                }
                this.$emit('dayStatus', ischeck)
            }
        },
        mounted() {
            this.theDay = Session.get('preson_td_id')
            if (this.calendarInfo.yy_date.length > 0) {
                this.initToday()
                this.initChooseDate();
                this.initCalendarData();
                this.initTpList()
            }
        },
        methods: {
            initToday() {
                let today = getDate('yyyy-mm-dd', new Date().getTime()).substr(0, 10)
                this.today = today
            },
            initChooseDate(day) {
                if(day) {
                    this.checkTime = day.day.substr(0, 7)
                }else {
                    this.checkTime = this.today.substr(0, 7)
                }
            },
            initCalendarData() {
                let days = []
                let yy_date = this.calendarInfo.yy_date//所有时间表
                let tps = this.calendarInfo.tps
                let opened_date = this.calendarInfo.opened_date
                let closed_pre_week = this.calendarInfo.closed_pre_week
                let closed_date = this.calendarInfo.closed_date
                //记录每一天所有的票类型
                // yy_date.forEach(day => {
                //     let arr = [] // 记录所有时段信息
                //     day.tp.forEach(t => {
                //         t.forEach(l => {
                //             arr.push(l)
                //         })
                //     })
                //     day.arr = arr
                // })
                //循环出当天所有入馆时段
                yy_date.forEach(day => {
                    let timeArr = []
                    let timeInfoList = []
                    day.tp.forEach(t => {
                        t.forEach(l => {
                            if(!timeArr.includes(l.tp_id)) {
                                timeArr.push(l.tp_id)
                            }
                        })
                    })
                    //根据timeArr找出时间信息 (显示的时间汉字， 时间id， )
                    timeArr.forEach((t, index) => {
                        let time_show = tps.filter(s => {
                            return s.tp_id == t
                        })[0]
                        timeInfoList.push({
                            tp_id: t,
                            time_show: time_show.time_period_show,
                            tickets: []
                        })
                    })
                    day.timeInfoList = timeInfoList

                    timeInfoList.forEach(t => {
                        day.tp.forEach(e => {
                            if(e[0].tp_id == t.tp_id) {
                                t.tickets = e
                            }
                        })
                    })
                });
                // console.log(yy_date)

                //循环出每一个tp的时间段显示文字
                // yy_date.forEach(e => {
                //     e.tp.forEach( t => {
                        // t.time_show = tps.filter((s) => {
                        //     return s.tp_id == t.tp_id
                        // })[0].time_period_show
                //     })
                // });
                let firstDate = new Date(yy_date[0].t_date)
                let lastDate = new Date(yy_date[yy_date.length-1].t_date)
                let first_time = firstDate.getTime()//第一天时间戳
                let last_time = lastDate.getTime()//最后一天时间戳
                let dayNum = (last_time-first_time)/ONEDAY + 1//第一天到最后一天共多少天

                // 算出第一天是周几['日','一,...]
                let first_times_day = firstDate.getDay()
                // 计算第一天前需要补几天
                let startdaynum
                if(first_times_day == 0) {
                    startdaynum = 6
                }else {
                    startdaynum = first_times_day - 1
                }

                // let startdays = []
                //补全第一天前的日子
                for(let i=0;i<startdaynum;i++) {
                    let day = {
                        day: getDate('yyyy-mm-dd', first_time - ((i+1) * ONEDAY)).substr(0, 10)
                    }
                    days.unshift(day)
                }
                for(let i = 0; i<dayNum; i++) {
                    let day = {
                        day: getDate('yyyy-mm-dd', first_time + ((i) * ONEDAY)).substr(0, 10)
                    }
                    days.push(day)
                }
                let last_times_day = lastDate.getDay()
                let lastdaynum
                if(last_times_day == 0) {
                    lastdaynum = 0
                }else {
                    lastdaynum = 7 - last_times_day
                }
                for(let i=0;i<lastdaynum;i++) {
                    let day = {
                        day: getDate('yyyy-mm-dd', last_time + ((i+1) * ONEDAY)).substr(0, 10)
                    }
                    days.push(day)
                }
                days.forEach((e, index) => {
                    //把闭馆日识别出来
                    closed_pre_week.forEach(w => {
                        //普通闭馆日
                        if(new Date(e.day).getDay() == w) {
                            e.close = true
                        }
                    })
                    //特殊闭馆日 (假如closed_date的格式为yyyy-mm-dd) 接口出来可能需要修改
                    closed_date.forEach(c => {
                        if(e.day == c) {
                            e.close = true
                        }
                    })
                    //特殊开馆日
                    opened_date.forEach(c => {
                        if(e.day == c) {
                            e.close = false
                        }
                    })
                    //补充数据
                    let dateInfo = yy_date.filter(d => {
                        return d.t_date == e.day
                    })
                    if(dateInfo&&dateInfo.length) {
                        // debugger
                        e.td_id = index+1
                        e.tp = dateInfo[0].tp
                        e.tp_last_stock_sum = dateInfo[0].tp_last_stock_sum
                        e.timeInfoList = dateInfo[0].timeInfoList
                    }else {
                        e.add = true
                    }
                    //判断有没有余票
                    if(e.tp_last_stock_sum>0) {
                        e.has = true
                    }else {
                        e.has = false
                    }
                })
                this.days = days
            },
            checkDay(day) {
                if(day.td_id&&day.tp_last_stock_sum>0) {
                    if(day.td_id == this.theDay) {
                        this.theDay = ''
                        this.$emit('checkDay', {})
                        this.initChooseDate()
                        this.initTpList()
                    }else {
                        this.theDay = day.td_id
                        this.initChooseDate(day)
                        this.$emit('checkDay', day)
                    }
                }else {
                    this.$toast('不可选')
                }
            },
            initTpList() {
                this.$emit('initTpList', this.calendarInfo.yy_date[0].timeInfoList)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .timePicker{
        width: 100%;
        height: 100%;
        background: #fff;
        padding-bottom: 22px;
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
        .calendar__block {
            overflow: hidden;
            padding: 48px 24px 0 24px;
            &+& {
                margin-top: 10px;
            }

            .header {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                margin-bottom: 36px;

                .title {
                    font-size:30px;
                    font-weight:bold;
                    color:rgba(53,53,53,1);
                }

                .date {
                    font-size:30px;
                    font-weight:400;
                    color:rgba(53,53,53,1);
                }
            }
            .weekdays {
                font-size: 0;
                display: flex;
                justify-content: space-between;
                margin-bottom: 26px;
                li {
                    width: 68px;
                    height: 68px;
                    text-align: center;
                    display: inline-block;
                    background: #F17F2A;
                    color: #ffffff;
                    padding: 9px;
                    font-weight: 500;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    border-radius:8px;
                    p {
                        font-size: 24px;
                    }
                    small {
                        font-size: 14px;
                    }
                }
            }
            .days{
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                align-content: space-between;
                li{
                    width: 68px;
                    height: 68px;
                    border-radius:8px;
                    font-size: 26px;
                    color: #D5D5DD;
                    text-align: center;
                    margin-bottom: 26px;
                    margin-right: 34px;


                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    background: #fde5b5;
                    &:nth-of-type(7n) {
                        margin-right: 0;
                    }
                    .small{
                        font-size:18px;
                        font-weight:500;
                        color:rgba(220,97,58,1);
                    }
                    .day{
                        color: #353535;
                    }
                    &.closed{
                        background: #ffffff;
                        border: 2px solid #AAAAAA;
                        line-height: 68px;
                    }
                    &.today{
                        position: relative;
                        .tod{
                            display: inline-block;
                            width: 28px;
                            height: 28px;
                            line-height: 28px;
                            font-size: 28px;
                            position: absolute;
                            right: -4px;
                            top: -6px;
                            transform: scale(0.5);
                            background: #dc613a;
                            color: #ffffff;
                        }
                    }
                    &.check{
                        background: #F8A80B;
                        .day{
                            color: #ffffff;
                        }
                        .small{
                            color: #ffffff;
                        }
                    }
                    &.none{
                        border: 2px solid #AAAAAA;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        background: #ffffff;
                        .small{
                            color: #353535;
                        }
                        .day{
                            color: #353535;
                        }
                    }
                    &.add{
                        background: #ffffff;
                        border: 2px solid #AAAAAA;
                        .day{
                            color: #AAAAAA;
                        }
                    }
                }
            }
        }
    }
</style>